<template>
	<view style="padding: 193rpx 30rpx 282rpx">
		<view class="fix-bg" />
		<view class="flex-column align-center">
			<u-image :key="info.key" height="128" lazyLoad :src="info.src" width="128" />
			<view class="h1">{{ info.title }}</view>
			<view class="h3">
				<view v-if="status == 0">
					剩余
					<text class="highlight">{{ info.tick }}</text>
					自动取消订单
				</view>
				<text v-else>{{ info.desc }}</text>
			</view>
		</view>
		<view class="flex-column" style="margin-top: 98rpx">
			<view class="list-item">
				<text class="value">{{ info.name }}</text>
				<text class="label">用户</text>
			</view>
			<view class="list-item">
				<text class="value">{{ info.telephone }}</text>
				<text class="label">电话</text>
			</view>
			<view class="list-item">
				<text class="value">{{ info.createTime }}</text>
				<text class="label">预约开始时间</text>
			</view>
			<view class="list-item">
				<text class="value">{{ info.chargingDuration }}小时</text>
				<text class="label">预计充电时长</text>
			</view>
			<view class="list-item">
				<text class="value">{{ info.station }}</text>
				<text class="label">充电站</text>
			</view>
			<view class="list-item">
				<text class="value">{{ info.pileName }}</text>
				<text class="label">充电桩</text>
			</view>
		</view>
		<view v-if="status == 1" style="margin-top: 70rpx">
			<u-button shape="circle" type="primary" @click="goScanCode">扫码充电</u-button>
		</view>
	</view>
</template>

<script>
var scanCode = require('@/utils/scanCode.js');
export default {
	data() {
		return {
			status: 0,
			info: {}
		};
	},
	onLoad(options) {
		this.status = options.status;
		this.info = this.createDynamicDescription();
		this.getOpenerEventChannel().on('data', (data) => {
			this.info = { ...data, ...uni.getStorageSync('userInfo'), ...this.info };
			this.status == 0 && this.tick();
		});
	},
	methods: {
		tick() {
			let duration = (new Date() - new Date(this.info.createTime)) / 1000;
			let diff = this.info.chargingDuration * 60 * 60 - duration;

			this.$set(this.info, 'tick', this.formatToTime(diff));
			setInterval(() => {
				diff--;
				this.info.tick = this.formatToTime(diff);
			}, 1000);
		},
		formatToTime(seconds) {
			let hour = Math.floor(seconds / 3600);
			seconds %= 3600;
			let minute = Math.floor(seconds / 60);
			seconds %= 60;
			return `${hour} : ${String(minute).padStart(2, 0)} : ${String(parseInt(seconds)).padStart(2, 0)}`;
		},
		createDynamicDescription() {
			let status = +this.status;
			let o = {};
			switch (status) {
				case 0:
					o.title = '审核中';
					o.desc = '';
					break;
				case 1:
					o.title = '已通过';
					o.desc = '申请已通过请按时使用充电桩';
					break;
				case 3:
					o.title = '申请已失效';
					o.desc = '桩主未在有效时间内接受申请';
					break;
				case 2:
					o.title = '已拒绝';
					o.desc = '很抱歉，本次申请未被通过';
					break;
				case 4:
					o.title = '已取消';
					o.desc = '您已取消该预约';
					status = 3;
				default:
			}
			o.src = require(`@/homeSub/static/status${status}.png`);
			o.key = Date.now();
			return o;
		},

		// 扫码
		goScanCode: async function () {
			let isOnTime = Date.now() - new Date(this.info.createTime) >= 0;

			if (!isOnTime) {
				uni.showModal({
					content: '未到预约时间内，请到预定时间再开始使用',
					confirmText: '知道了'
				});
				return;
			}

			//#ifdef APP-PLUS
			let result = await this.$store.dispatch('requestPermissions', 'CAMERA');
			if (result !== 1) {
				return;
			} else {
				if (uni.getStorageSync('token')) {
					scanCode.stateOfCharge();
				} else {
					scanCode.scanCode();
				}
			}
			//#endif
			//#ifdef MP-WEIXIN
			if (uni.getStorageSync('token')) {
				scanCode.stateOfCharge();
			} else {
				scanCode.scanCode();
			}
			//#endif
		}
	}
};
</script>

<style lang="scss" scoped>
.flex-column {
	display: flex;
	flex-direction: column;
	row-gap: 24rpx;
}
.align-center {
	align-items: center;
}
.h1 {
	font-size: 50rpx;
	text-align: center;
}
.h3 {
	@extend .h1;
	font-size: 36rpx;
	margin-top: 62rpx;
	.highlight {
		color: #0068b7;
		padding: 0 12rpx;
	}
}
.fix-bg {
	position: fixed;
	top: 0;
	left: 0;
	height: 549rpx;
	width: 100%;
	background: linear-gradient(rgba(#6bd0ff, 0.3), #ffffff);
	z-index: -1;
}
.list-item {
	height: 165rpx;
	border-bottom: 1rpx solid rgba(#0f294d, 0.1);
	display: flex;
	flex-direction: column;
	row-gap: 10rpx;
	justify-content: center;
	.label {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(15, 41, 77, 0.8);
		line-height: 39rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.value {
		font-family: DIN, DIN;
		font-weight: 500;
		font-size: 40rpx;
		color: #0f294d;
		line-height: 48rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
}
</style>
